<template>
  <q-page class="column">
    <q-inner-loading visible v-if="model.projectId < 0">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading> 

    <!-- create new -->
    <div v-if="model.projectId>=0">
      <q-list class="sms col q-py-none" no-border>        
        <q-list-header class="row">
          <span class="col">选择约稿影片</span>
        </q-list-header>
        <q-item>
          <q-input readonly class="full-width" v-model="model.movieName" hide-underline placeholder="未选择" @click="modal=true" />
          <q-btn flat dense icon="mdi-settings" color="primary" @click="modal=true" />
        </q-item>

        <q-list-header class="row">
          <span class="col">约稿数量</span>
        </q-list-header>
        <q-item>
          <q-input class="full-width" type="number" v-model="model.articleCount" hide-underline />
        </q-item>

        <q-list-header class="row">
          <span class="col">项目日期</span>
        </q-list-header>
        <q-item>
          <q-input class="full-width" v-model="model.projectDate" hide-underline />          
        </q-item>

      </q-list>
    </div>

    <!-- save -->
    <q-btn color="primary" class="fixed" label="保存" icon="mdi-content-save"
        style="right: 15px; bottom: 15px"
        v-if="model.projectId>=0" :loading="loading" @click="save" />

    <!-- modal -->
    <q-modal v-model="modal" :position="$q.platform.is.mobile?'':'right'" :maximized="$q.platform.is.mobile">
      <q-toolbar color="primary">
        <q-toolbar-title>影片搜索</q-toolbar-title>
        <q-btn flat round dense icon="mdi-close" @click="modal=false" />
      </q-toolbar>
      <q-search icon="search" class="full-width" :value="query" color="primary" 
                placeholder="搜索影片" autofocus="true" @change="searchMovie" />
      <q-list separator no-border v-if="query">
        <q-list-header>搜索结果： <b class="text-primary">{{list.length}}</b></q-list-header>
        <q-item-separator />
        <q-item v-for="item in list" :key="item.id">
          <q-item-main>
            <q-item-tile label>{{ item.name }} ({{item.releaseDate}})</q-item-tile>
            <q-item-tile sublabel v-if="item.score>0">评分:{{item.score/10}}, 评价人数:{{item.ratingCount}}</q-item-tile>
            <q-item-tile sublabel v-if="item.score<=0">想看人数:{{item.wishCount}}</q-item-tile>
          </q-item-main>
          <q-item-side>
            <q-radio v-model="model.movieId" :val="item.id" @input="selectMovie(item)"/>
          </q-item-side>
        </q-item>
      </q-list>
    </q-modal>
  </q-page>
</template>

<script>
export default {
  name: 'PageProjectEdit',
  data() {
    return {
      loading: false,
      modal: false,
      query: '',
      list:[],
      model : {
        projectId : -1,
        projectDate: '',
        movieName: '',
        movieId: -1,
        articleCount:0
      }
    }
  },
  mounted() {
    let me = this;
    this.$api.ui.pageTitle = '编辑约稿项目';
    me.loadModel(this.$route.params.id);
    this.$api.ui.pageBackBtn = function(){
      me.$router.push('/project');
    }
  },
  methods: {
    loadModel(id) {
      let me = this;
      if(id <= 0) {
        this.model = {
          projectId : 0,
          projectDate: '',
          movieName: '',
          movieId: 0,
          articleCount:0
        };
      } else {
        this.$api.project.loadOne(id, res=>{
          me.model = res.data.model;
        });
      }
    },
    save() { 
      let me = this;
      this.loading = true;
      this.$api.project.saveProject(me.model, res=>{
        me.$q.notify({
          message: '保存成功',
          type: 'positive',
          color: 'positive',
          icon: 'mdi-check'
        });
        this.loading = false;
      }, err=>{
        this.loading = false;
      });
    },
    searchMovie(val) {
      this.query = val;
      this.list = [];
      if(this.query) {
        let me = this;
        this.$api.movie.searchMovie(val, res=>{
          me.list = res.data.model;
        });
      }
    },
    selectMovie(movie) {
      this.model.movieId = movie.id;
      this.model.movieName = movie.name;
      this.modal = false;
    }
  }
}
</script>

<style>
div.sms .q-list-header {
  background-color: #eee;
  padding: 15px 10px 3px 10px;
  min-height: 30px;
}
</style>


